<!DOCTYPE html>
<html class="overflow-hidden">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="no"/>
    <meta name="wap-font-scale" content="no">
    <meta content="telephone=no" name="format-detection">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>礼仪之邦-切换城市</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/swiper.min.css"/>
    <link rel="stylesheet" href="css/public.css"/>
    <link rel="stylesheet" href="css/app.css"/>
</head>
<body class="overflow-hidden">
<div class="city-bar">
    <h2 class="city-header">
        <a href="#" class="sprite-icon"></a>城市列表
    </h2>

    <div class="city-cont">
        <span class="city-tips">当前位置</span>

        <div class="city-current">
            <span class="city-loading">定位中...</span>
            <span class="city-loaded">重庆</span>
        </div>
        <span class="city-tips">热门城市</span>

        <div class="city-hots list-row">
            <ul class="clearfix row-4">
                <li><span>上海</span></li>
                <li><span>广州</span></li>
                <li><span>北京</span></li>
                <li><span>深圳</span></li>
                <li><span>上海</span></li>
                <li><span>广州</span></li>
                <li><span>北京</span></li>
                <li><span>深圳</span></li>
            </ul>
        </div>
        <span class="city-tips">热门城市</span>
    </div>
</div>
<div id="wrapper" class="city-wrapper">
    <div id="scroller">
        <div class="group-row">
            <div class="has-arrow-list">
                <div class="list-modal" id="cityList"></div>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/box.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/area.js"></script>
<script src="js/public.js"></script>
<script>
    $(function () {
        var _html_ = "";
        var _this_ary = area.Items["0"];
        var _list = $("#cityList");
        if (area.Exists("0")) {
            for (var i = 0; i < _this_ary.length; i++) {
                _html_ += '<a class="javascript:;">' + _this_ary[i] + '</a>';
            }
            _list.scrollTop(0);
            _list.empty().html(_html_);
        }

        $(window).resize(function () {
            var _h = $(".city-bar").height();
            $("#wrapper").css({
                "top": _h + "px",
                "height": ($(this).height() - _h) + "px"
            });
            $("#scroller").height(_list.height());

            var myScroll = publicFuns.newIScroll("#wrapper");
        }).trigger("resize");
    });
</script>
</body>
</html>